/**
 * @description 论坛详情
 */



import React, { useState, useMemo } from "react"
import { Button, Tabs } from "antd"

import AbIcon from "@/components/DecorateIcons/Ab_Icon"
import DiscussTab from "../Detail/Component/DiscussTab"
import GoodImg from '@/assets/img/good.jpeg'
const content = '这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,这是论坛内容,'

function ForumdetailPage({ forumdetail, paginationBase, discussBase }) {

  let {
    iconFlag,
    labelFlag,
  } = forumdetail.forumattr.base
  let {
    thumbsup_icon,
    thumbsuped_icon,
    storeup_icon,
    storeuped_icon,
  } = forumdetail.operate.base


  // 是否点赞
  const [thumbsUpId, setThumbsUpId] = useState('')
  // 是否收藏
  const [storeUpId, setStoreUpId] = useState('')

  // tab
  const tabList = useMemo(() => {
    return [
      {
        key: "discuss",
        label: "评论",
        children: <DiscussTab base={discussBase} paginationBase={paginationBase} />,
      },
    ]
  }, [])

  return (
    <div className="forumdetail">

      {/* 页面标题 */}
      <div className="header">
        <div className="text">论坛详情</div>
      </div>

      {/* 文章详情 */}
      <div className="forumattr">

        <div className="title">论坛的标题</div>

        <div className="info">

          {/* 时间 */}
          <div className='time' >
            {
              iconFlag &&
              <AbIcon iconName='FieldTimeOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">时间:</span>
            }
            <span className="text">2024-11-17 10:30:00</span>
          </div>

          {/* 发布人 */}
          <div className='publisher' >
            {
              iconFlag &&
              <AbIcon iconName='UserOutlined' className='icon'></AbIcon>
            }
            {
              labelFlag &&
              <span className="prefix">发布人:</span>
            }
            <span className="text">管理员</span>
          </div>

        </div>

        {/* 操作 */}
        <div className="operate">
          {/* 点赞 */}
          <Button type='text' className="thumbs-btn" icon={<AbIcon className='icon' iconName={thumbsUpId ? thumbsuped_icon : thumbsup_icon} />} onClick={() => setThumbsUpId(thumbsUpId ? '' : '1')}>{thumbsUpId ? '取消赞(1)' : '点赞(0)'}</Button>
          {/* 收藏 */}
          <Button type='text' className="store-btn" icon={<AbIcon className='icon' iconName={storeUpId ? storeuped_icon : storeup_icon} />} onClick={() => setStoreUpId(storeUpId ? '' : '1')}>{storeUpId ? '取消收藏(1)' : '收藏(0)'}</Button>

        </div>


        {/* 封面图片 */}
        <div className="imgbox">
          <img className="img" src={GoodImg} alt="" draggable={false} />
          <img className="img" src={GoodImg} alt="" draggable={false} />
          <img className="img" src={GoodImg} alt="" draggable={false} />
        </div>

        {/* 内容 */}
        <div className="content" dangerouslySetInnerHTML={{ __html: content }}></div>


      </div>

      {/* 商品详情: tab标签页 */}
      <Tabs
        className='detailtab'
        destroyInactiveTabPane={true}
        items={tabList}
      />


    </div >
  )
}

export default React.memo(ForumdetailPage)